<template>
    <div class="banner">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <!-- <swiper-slide>
          <router-link to="/fxup" target="_blank" style="display:block;">
            <img src="./images/banner1.jpg" alt="">
            < dl>
              <dt></dt>
              <dd class="line">
                <img src="./images/banner_title.png" alt="">
              </dd>
            </dl>
          </router-link>
        </swiper-slide> -->
        <swiper-slide>
          <img src="./images/banner_1.jpg" alt="">
          <dl>
            <dt></dt>
            <dd class="line">
              <img src="./images/banner_title.png" alt="">
            </dd>
          </dl>
        </swiper-slide>
        <swiper-slide>
          <img src="./images/banner_2.jpg" alt="">
          <dl>
            <dt></dt>
            <dd class="line">
              <img src="./images/banner_title.png" alt="">
            </dd>
          </dl>
        </swiper-slide>
        <swiper-slide>
          <img src="./images/banner_3.jpg" alt="">
          <dl>
            <dt></dt>
            <dd class="line">
              <img src="./images/banner_title.png" alt="">
            </dd>
          </dl>
        </swiper-slide>
        <swiper-slide>
          <img src="./images/banner_4.jpg" alt="">
          <dl>
            <dt></dt>
            <dd class="line">
              <img src="./images/banner_title.png" alt="">
            </dd>
          </dl>
        </swiper-slide>
        <!-- Optional controls -->
        <!--<div class="swiper-pagination"  slot="pagination"></div>-->
        <!--<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>-->
        <!--<div class="swiper-button-next swiper-button-white" slot="button-next"></div>-->
        <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
      </swiper>
  </div>
</template>
<script>

  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          loop: true,
          noSwiping : true,
          autoplay: 3000,
          speed: 1000,
          effect: 'fade',
          paginationType:"bullets", // 分页器是圆点
          pagination : '.swiper-pagination',
          paginationClickable :true,
          prevButton:'.swiper-button-prev',
          nextButton:'.swiper-button-next',
          mousewheelControl : false,
        }
      }
    },components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {

    }
  }
</script>


<style>
  @import url('../../common/css/swiper-3.4.2.min.css');

  .banner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position:relative;
  }
  .banner .swiper-slide::before {
    content: "";
    width: 100%;
    height: 100%;
    /*background: url(./images/pattern_overlay.png);*/
    position: absolute;
    top: 0;
    left: 0;
  }
  .banner .swiper-slide img{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .banner .swiper-slide dl {
    width: 820px;
    height: 262px;
    position: absolute;
    left: 0;
    right:0;
    margin: 0 auto;
    top: 50%;
    margin-top: -130px;
    text-align: center;
  }
  .banner .swiper-slide::before{
    position:static;
  }
  .banner .swiper-slide dt {
    line-height: 75px;
    font-size: 7.2rem;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 90px;
  }

  .banner .swiper-slide .line {
    font-size: 2.5rem;
    line-height: 82px;
    color: #fff;
    position: absolute;
    z-index:999;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 100px;
    opacity: 1;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
  }

  .banner .swiper-slide .line i {
    position: absolute;
    width: 25%;
    height: 2px;
    background: #fff;
    margin-top: 32px;
  }

  .banner .swiper-slide .line i.left {
    left: 5%;
  }

  .banner .swiper-slide .line i.right {
    right: 5%;
  }

  .banner .swiper-slide .line p {
    float: left;
    width: 280px;
    margin: 0 270px;
    padding-top: 20px;
    line-height: 30px;
    height: 62px;
    text-transform: uppercase;
    font-size: 24px;
  }

  .banner .swiper-slide .line {
    animation: moveFont 5s !important;
    -moz-animation: moveFont 5s !important;
    -webkit-animation: moveFont 5s !important;
    -ms-animation: moveFont 5s !important;
    -o-animation: moveFont 5s !important;
  }

  /*@-moz-keyframes moveFont {*/
    /*0% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*20% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*30% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*90% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*100% {*/
      /*opacity: 0;*/
      /*left: -100%;*/
    /*}*/
  /*}*/

  /*@-webkit-keyframes moveFont {*/
    /*0% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*20% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*30% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*90% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*100% {*/
      /*opacity: 0;*/
      /*left: -100%;*/
    /*}*/
  /*}*/

  /*@-o-keyframes moveFont {*/
    /*0% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*20% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*30% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*90% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*100% {*/
      /*opacity: 0;*/
      /*left: -100%;*/
    /*}*/
  /*}*/

  /*@-ms-keyframes moveFont {*/
    /*0% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*20% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*30% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*90% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*100% {*/
      /*opacity: 0;*/
      /*left: -100%;*/
    /*}*/
  /*}*/

  /*@keyframes moveFont {*/
    /*0% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*20% {*/
      /*opacity: 0;*/
      /*left: 100%;*/
    /*}*/
    /*30% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*90% {*/
      /*opacity: 1;*/
      /*left: 0;*/
    /*}*/
    /*100% {*/
      /*opacity: 0;*/
      /*left: -100%;*/
    /*}*/
  /*}*/

</style>
